<script lang="jsx">
import { ElButton } from "element-plus";
import { defineComponent, h, reactive, watch } from "vue";
import { CONFIRM } from "@/components/c-button/src/dicts.js";
import { ElMessageBox } from "element-plus";

/**
 * 当click为promise按钮会自动加上loading
 * 增加customType为confirm,点击按钮会弹确认框
 * */

export default defineComponent({
  name: "cButton",
  inheritAttrs: false, // 禁用 Attributes 继承 (取消v-on监听器的继承)
  props: {
    ...ElButton.props,
    customType: String, // confirm
    confirmContent: {
      // 确认框的提示文本(customType为confirm才会生效)
      type: String,
      default: "确定删除吗？",
    },
  },
  setup(props, e) {
    const { slots, attrs, emit } = e;
    console.log(e, "eee", props);
    const data = reactive({
      loading: false,
    });
    watch(
      () => props.loading,
      (val) => {
        data.loading = val;
      },
      {
        immediate: true,
      }
    );
    /**
     * 按钮点击事件
     * */
    async function handleClick(e) {
      const { onClick } = attrs;
      const { customType, confirmContent } = props;
      if (!onClick) return;
      const res = onClick(e);
      if (customType === CONFIRM) {
        await ElMessageBox.confirm(confirmContent, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });
      }
      if (res instanceof Promise) {
        data.loading = true;
        await res;
        data.loading = false;
      }
    }
    return () =>
      h(
        ElButton,
        { ...props, loading: data.loading, ...attrs, onClick: handleClick },
        slots
      );

    /*return () => (
      <ElButton
        {...{ ...props, loading: data.loading, ...attrs, onClick: handleClick }}
      >
        {slots}
      </ElButton>
    );*/
  },
});
</script>

<style scoped></style>
